 <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>photo album</title>

    <!-- Bootstrap -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <input type="hidden" value="{$folder_id}" id="folder_id">

    <div class="mask" id="mask">
    </div>

    <div class="origin" id="origin">
      <img id="origin-image" src="" height= "400" />
    </div>
    
    <div class="board">
      <div style="float:left"><img src="http://128.199.209.239/IM/Public/back.jpg" width="50px" id="back"></div>
      <div style="text-align:center"><h1>photo album</h1></div>
      <br/>
      <table id="photo_album" class="table">

      </table>
    </div>
  </body>


  <script type="text/javascript">
  $(document).ready(function(){
    
    var photoList;
    var folder_id = $("#folder_id").val();

    // get photo list:
    $.ajax({
      type:'POST', 
      url:'http://128.199.209.239/IM/index.php/Home/Photo/getList',
      dataType:'json',
      data:{folder_id: folder_id},
      success:function(data){
        console.log(data);
        photoList= data;
        showImage();
      }
    });


    $("img#back").click(function(){
      window.location.href="http://128.199.209.239/IM/index.php/Home/Console/photoFolder_en.html";
    })

    // show photo album
    function showImage(){
      var wd_height = $(window).height();
      var wd_width = $(window).width();
      var col = Math.floor((wd_width-150)/200);
      var row = Math.floor(photoList['length']/col)+1;
      console.log("width: "+ wd_width +"; col: "+col);

      for(var i=0; i<row; i++){
        var str = "<tr>";
        for(var j=0; j<col; j++){
          var index = i*col+j;
          if(index < photoList['length']){
            str = str+"<td><img class='Thumb' src = 'http://128.199.209.239/IM/Public/Thumb/" + photoList[index]['photo_name']+"'"+ "id="+ photoList[index]['photo_name'] + " /></td>";
          }else{
            str+= "<td></td>";
          }
        }
        str+= "</tr>";
        $("#photo_album").append(str);
      }
    }

    // display original image on click
     $("div").delegate("img.Thumb","click", function(){
      img = $(this).attr('id');
      var img_url = "http://128.199.209.239/IM/Public/Photo/"+img;
      $("#origin-image").attr("src", img_url);
      window.setTimeout(displayImage,1000);


     });

     // hide mask on click
     $("div#mask").click(function(){
      $(this).hide();
      $("#origin").hide();
      $("#origin-image").attr("src", "");
     });


     function displayImage(){

      $("div#mask").show();
      $("div#origin").show();

      var height = $("img#origin-image").height();
      var width = $("img#origin-image").width();
      $("div#origin").css('height', height);
      $("div#origin").css('width', width);


      if(!width){
        width=200;
      }

      $("div#origin").css('margin-top', -height/2);
      $("div#origin").css('margin-left', -width/2);
      console.log(img);
     }

  });




  </script>


  <style type="text/css">
  div.board{
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
    z-index: 0;
  }
  table#photo_album{
    width: 100%;
  }

  div.mask{
    display: none;
    position: fixed;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=60); /*IE滤镜，透明度50%*/
    -moz-opacity:0.6; /*Firefox私有，透明度50%*/
    opacity:0.6;/*其他，透明度50%*/
    z-index: 100;
  }

  div.origin{

    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    z-index: 200;
  }

  </style>

  </html>